<template>
  <div class="vedio123">
    <div v-show="!isError">
      <video
        id="videobox"
        className="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
        preload="auto"
        width="100%"
        ref="videoRef">
        <source :src="videoSrc" type="video/mp4">
      </video>
    </div>
    <div v-show="isError" className="errorTip"><p>视频出错了！</p></div>
  </div>
  <div class="upload123">
    <el-button plain type="success" @click="this.$refs.minioUpload.selectFile()">上传</el-button>
    <minio-upload ref="minioUpload" @success="uploadCallback"/>
  </div>
</template>
<script lang="ts">
import 'video.js/dist/video-js.css'  //videojs样式
import {defineComponent, onMounted, ref} from "vue";
import videojs from "video.js";
import MinioUpload from '@/components/Upload/MinioUpload.vue'
import {ElMessage} from "element-plus";

export default defineComponent({
  components: {
    MinioUpload
  },
  setup(props, {emit}) {
    var isError = ref<boolean>(false);
    var videoSrc = ref<string>("");
    var videoRef = ref();
    var player = ref();
    console.log(videoSrc.value, "视频");
    onMounted(() => {
      // loadVedio();
      console.log(player.value);
    });
    const loadVedio = () => {
      player.value = videojs(
        videoRef.value,
        {
          //视频源
          sources: [
            {
              src: "",
              type: "video/webm",
              autoplay: false
            }
          ],
          //是否显示播放按钮
          bigPlayButton: true,
          playbackRates: [0.5, 1, 1.5, 2],
          controls: true,
          //设置小喇叭音量键
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
        },
        () => {
          player.value.on("play", () => {
            console.log("开始播放");
          });
          //设置默认2倍速
          player.value.playbackRate(2);
        }
      );
    };

    const uploadCallback = (fileInfo) => {
      ElMessage({
        type: 'success',
        message: '上传成功，文件地址是：' + fileInfo.url
      });
      videoSrc.value = fileInfo.url;

      // 回传视频地址
      emit('success', fileInfo.url)
    }

    return {isError,
      videoRef,
      uploadCallback};
  },
});
</script>
<style scoped>
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

/*the animation definition*/
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    -ms-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

.video-js {
  background-color: #ffffff;
  margin-top: -10px;
}

.vedio123 {
  width: 100%;
  height: 100%;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}
.vedio123:hover {
  border-color: #409eff;
}
.upload123 {
  /* background-color: #3a8ee6; */
  position: absolute;
  top: 0;
  right: 0;
}
</style>

